<template>
  <div class="mainpage" v-loading="loading">
    <div style="position: absolute; right: 34px">
      <el-button plain @click="back">{{ $t('common.back') }}</el-button>
    </div>
    <div class="topInfo">
      <strong class="label">{{ $t('mesSalesOrder.salesOrderCode') }}：</strong>
      <strong class="value">{{ info.salesOrderCode || '' }}</strong>
      <!--      <div class="stepBox">-->
      <!--        <el-steps :active="active">-->
      <!--          <el-step-->
      <!--            v-for="(i, idx) in stepList"-->
      <!--            :title="i.title"-->
      <!--            :icon="i.icon"-->
      <!--            :key="idx"-->
      <!--            :description="idx + 1 <= active ? i.desc : ''"-->
      <!--          ></el-step>-->
      <!--        </el-steps>-->
      <!--      </div>-->
    </div>
    <div class="customer">
      <div class="drawer-card-title">
        <div class="drawer-card-title__mark"></div>
        <span class="drawer-card-title__text ml8">{{ $t('mesSalesOrder.customerInfo') }}</span>
      </div>
      <div style="margin-top: 20px">
        <el-descriptions class="margin-top" :column="3" size="medium">
          <el-descriptions-item :label="$t('mesSalesOrder.salesOrderCode')">{{
            info.salesOrderCode || '-'
          }}</el-descriptions-item>
          <el-descriptions-item :label="$t('mesSalesOrder.customerCode')">{{
            info.customerCode || '-'
          }}</el-descriptions-item>
          <el-descriptions-item :label="$t('mesSalesOrder.customerName')">{{
            info.customerName || '-'
          }}</el-descriptions-item>
          <el-descriptions-item :label="$t('mesSalesOrder.deliveryMethod')">{{
            info.deliveryMethod || '-'
          }}</el-descriptions-item>
          <el-descriptions-item :label="$t('mesSalesOrder.customerOrderCode')">{{
            info.customerOrderCode || '-'
          }}</el-descriptions-item>
          <el-descriptions-item :label="$t('mesSalesOrder.deliveryMethod')">{{
            info.deliveryMethod || '-'
          }}</el-descriptions-item>
          <el-descriptions-item :label="$t('mesSalesOrder.deliveryAddress')">{{
            info.deliveryAddress || '-'
          }}</el-descriptions-item>
        </el-descriptions>
      </div>
    </div>
    <div class="tableContainer">
      <div class="drawer-card-title">
        <div class="drawer-card-title__mark"></div>
        <span class="drawer-card-title__text ml8">{{ $t('mesSalesOrder.orderInfo') }}</span>
      </div>
      <div v-if="show" style="margin-top: 10px">
        <lb-table ref="xTable" :column="column" :pagination="false" :data="tableData.records" border align="center">
        </lb-table>
      </div>
    </div>
  </div>
</template>

<script>
import lbTable from '@/components/lb-table/lb-table'
import { getWholeProcess } from '@/api/order/mesSalesOrder'
import { getDict } from '@/api/common'
export default {
  name: 'orderDetail',
  components: {
    lbTable
  },
  data() {
    return {
      loading: false,
      active: 1,
      info: {},
      stepList: [
        { title: $i18n.t('mesSalesOrder.production'), icon: 'el-icon-setting', desc: '' },
        { title: $i18n.t('mesSalesOrder.progress4'), icon: 'el-icon-sell', desc: '' },
        { title: $i18n.t('common.outbound'), icon: 'el-icon-sold-out', desc: '' },
        { title: $i18n.t('mesSalesOrder.shipment'), icon: 'el-icon-truck', desc: '' }
      ],
      column: [
        // {
        //   prop: 'saleCode',
        //   label: '销售订单号'
        // },
        {
          prop: 'planCode',
          label: $i18n.t('mesSalesOrder.planCode'),
          width: '200',
          fixed: 'left',
          render: (h, scope) => {
            return (
              <el-link onClick={() => this.handleJump(scope.row)} type="primary">
                {scope.row.planCode}
              </el-link>
            )
          }
        },
        {
          prop: 'prodCode',
          label: $i18n.t('mesSalesOrder.prodCode'),
          width: '200',
          fixed: 'left',
          showOverflowTooltip: true
        },
        {
          prop: 'prodName',
          label: $i18n.t('mesSalesOrder.prodName'),
          width: '300',
          showOverflowTooltip: true
        },
        {
          prop: 'quantity',
          label: $i18n.t('mesSalesOrder.planQuantity'),
          width: 120
        },
        {
          prop: 'actualQuantity',
          label: $i18n.t('mesSalesOrder.actualQuantity'),
          width: 120
        },
        {
          prop: 'qualifiedQty',
          label: $i18n.t('mesSalesOrder.qualifiedQty'),
          width: 140
        },
        {
          prop: 'unqualifiedQty',
          label: $i18n.t('mesSalesOrder.unqualifiedQty'),
          width: 160
        },
        {
          prop: 'measureUnits',
          label: $i18n.t('mesSalesOrder.measureUnit'),
          width: 120
        },
        {
          prop: 'planBeginDate',
          label: $i18n.t('mesSalesOrder.planBeginDate'),
          width: 150
        },
        {
          prop: 'planEndDate',
          label: $i18n.t('mesSalesOrder.planEndDate'),
          width: 150
        },
        {
          prop: 'orderStatus',
          label: $i18n.t('mesSalesOrder.orderStatus'),
          optionProp: {
            value: 'value',
            label: 'description'
          },
          minWidth: 120,
          option: async (data) => {
            const list = await getDict('mes_sale_order_state')
            return list.data.result
          }
        }
        // {
        //   prop: 'bomVersionNumber',
        //   label: 'BOM配方版本号'
        // }
      ],
      tableData: {
        records: [],
        total: 0
      },
      show: false
    }
  },
  created() {
    const { id } = this.$route.query
    console.log(id)
    if (id) {
      this.getWholeProcess(id)
    }
  },
  methods: {
    back() {
      this.$router.push({
        path: '/order/mesSalesOrder'
      })
      const menu = JSON.parse(JSON.stringify(this.$store.getters.topmenus))
      const after = menu.filter((i) => i.title != $i18n.t('mesSalesOrder.salesOrderDetails'))
      this.$store.commit('SET_TOPMENUS', after)
    },
    handleJump(row) {
      console.log(row, '点击行')
      this.$router.push({
        path: '/order/mesProdOrderPlan/see',
        query: {
          id: row.planCode
        }
      })
    },
    getWholeProcess(id) {
      this.loading = true
      getWholeProcess(id)
        .then((res) => {
          console.log(res, 'xxxx')
          const data = res.data.result || {}
          this.info = data
          this.tableData.records = data.mesProdOrderPlanList || []
          this.active = Number(data.orderStatus)
          if (data.statusMap) {
            this.stepList[0].desc =$i18n.t('mesSalesOrder.inProgress2')+ `：${data.statusMap[1] || 0}`
            this.stepList[1].desc = $i18n.t('mesSalesOrder.progress3')+ ` ：${data.statusMap[2] || 0}`
            this.stepList[2].desc = $i18n.t('mesSalesOrder.progress1')+` ：${data.statusMap[3] || 0}`
            this.stepList[3].desc =$i18n.t('mesSalesOrder.progress2')+ ` ：${data.statusMap[4] || 0}`
          }
        })
        .finally(() => {
          this.loading = false
          this.show = true
        })
    }
  }
}
</script>

<style lang="scss" scoped>
// /deep/.el-step__line {
//   background: transparent;
//   border-top: 1px dashed;
//   .el-step__line-inner {
//     border-width: 0 !important;
//   }
// }

.mainpage {
  box-sizing: border-box;
  padding: 10px 20px 40px;
  position: relative;
  // min-height: calc(100vh - 122px);
}
.label {
  color: #333;
  font-weight: 600;
}
.value {
  color: #3d82ea;
  font-weight: 800;
  font-size: 18px;
}
.stepBox {
  box-sizing: border-box;
  width: 70%;
  padding: 30px 20px 20px;
}
.drawer-card-title {
  display: flex;
  align-items: center;
}
.drawer-card-title__mark {
  width: 4px;
  height: 16px;
  background-color: #00bfa5;
}
.drawer-card-title__text {
  color: #333;
  font-size: 16px;
  font-weight: 700;
  margin-left: 16px;
}
.customer {
  margin: 26px 0;
  /deep/.el-descriptions-item__label {
    font-size: 16px;
    color: #5a6f82;
    display: flex;
    align-items: center;
  }
  /deep/.el-descriptions-item__content {
    font-size: 15px;
    color: #333;
    display: flex;
    align-items: center;
  }
}
</style>
